{extend name="./template/default/m/pub/base.html" /}
{block name="seo"}
<title>个人书架-{$site_name}</title>
{/block}
{block name="content"}
{include file="./template/default/m/pub/top3.html" /}
<div id="app">
    <div class="selector-top" style="position: fixed;top: 46px;left: 0;width: 100%;z-index: 9;">
        <a class="selector-top-item active" href="/bookshelf">收藏</a>
        <a class="selector-top-item" href="/history">历史</a>
<!--        <a href="javascript:editBookmarker();" id="btnedit">-->
        <a v-show="editShow" @click="editSwitch()">
            <img class="selector-top-right-logo" src="/static/images/selector-top-right.png">
        </a>
        <a class="selector-top-right-font" v-show="!editShow"  @click="editSwitch()">完成编辑</a>
<!--        <a class="selector-top-right-font" style="display:none;" href="javascript:editBookmarkerClose();" id="btneditclose">完成编辑</a>-->
    </div>
    <div style="border:none;background-color:#f8f8f8;margin-top: 105px;">
        <ul class="manga-list-2">
            {raccoon:favors name="favors" where="user_id='$xwx_user_id'"}
            <li>
                <div class="manga-list-2-cover">
                    <a href="/{$book_ctrl}/{$vo.book.param}">
                        <img class="manga-list-2-cover-img" src="{$vo.book.cover_url}">
                    </a>
                    <span class="manga-list-2-cover-hover" :class="{'active': editBooks.includes(item.id
                    )}"
                          v-show="!editShow" @click="pushToEditBooks(item.id)"></span>
                </div>
                <p class="manga-list-2-title">
                    <a href="/{$book_ctrl}/{$vo.book.param}">{$vo.book.book_name}</a>
                </p>
                <p class="manga-list-2-tip">
                    <a style="display: unset;">作者:{$vo.book.author_name}</a>
                </p>
            </li>
            {/raccoon:favors}
        </ul>

    </div>
    <a class="center-main-bottom-btn m100" v-show="!editShow" @click="delFavors()">删除</a>
    <div class="toast" style="display:none;"></div>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            books: [],
            page: 0,
            isMore: 1,
            editShow: "true",
            editBooks:[],
            active: "false"
        },
        methods: {
            delFavors() {
                var str = this.editBooks.join(',')
                var params = {
                    ids: str
                }
                axios.post("/delfavors", params).then(response => {
                    ShowDialog(response.data.msg);
                    if (response.data.err == 0) {
                        setTimeout(function () {
                            window.location.reload()
                        }, 1000)
                    }
                })
            },
            editSwitch() {
                this.editShow = !this.editShow
                if (this.editShow == "true") {
                    this.editBooks = []
                    console.log(this.editBooks)
                }
            },
            pushToEditBooks(id) {
                const index = this.editBooks.indexOf(id);
                if (index > -1) {
                    this.editBooks.splice(index, 1);
                } else {
                    this.editBooks.push(id)
                }
                this.active = !this.active
                console.log(this.editBooks)
            },
            onScroll() {                    //可滚动容器的高度
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                //变量windowHeight是可视区的高度
                var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
                //变量scrollHeight是滚动条的总高度
                var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
                //滚动条到底部的条件
                if (scrollTop + windowHeight == scrollHeight) {
                    if (this.isMore == 1) { //如果还有更多数据，再请求接口，否则不再请求，节省服务器资源
                        this.getBooks(0)
                        this.page = this.page + 15
                    }
                }
            }
        },
        created() {
            window.addEventListener('scroll', this.onScroll);
        }
    })
</script>
{/block}